<template>
    <el-dialog title="授权" custom-class="el-dialog-600" v-model="visible">
        <el-table
            :data="tableList"
            stripe
            @selection-change="handleSelectionChange"
            :row-style="showTr"
            ref="tableRef"
        >
            <el-table-column type="selection"></el-table-column>

            <el-table-column prop="name" label="名称">
                <template #default="scope">
                    <div class="name-and-icon" :class="'aname' + scope.row.level">
                        <span
                            class="icon"
                            v-if="toggleIconShow(0, scope.row)"
                            @click="toggle(scope.$index)"
                        >
                            <el-icon>
                                <minus v-show="scope.row.expanded" />
                                <plus v-show="!scope.row.expanded" />
                            </el-icon>
                        </span>
                        <span>
                            {{ scope.row.name }}
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="type" label="类型" width="100px">
                <template #default="{ row }">
                    <span>{{ menuType(row.type) }}</span>
                </template>
            </el-table-column>
        </el-table>

        <template #footer>
            <el-button @click="visible = false"> 取 消 </el-button>
            <el-button type="primary" :loading="loading" @click="onSubmit"> 确 定 </el-button>
        </template>
    </el-dialog>
</template>

<script>
import { getCurrentInstance, ref, reactive, watch } from 'vue';
import { adminRole as Api } from 'api';

export default {
    setup() {
        const { proxy } = getCurrentInstance();

        let id = ref(null); // 用户id
        let loading = ref(false); //等待按钮
        let visible = ref(false); //弹窗开关
        let tableList = reactive([]); // 表格
        let tableSelectIdArr = reactive([]); // 全选ID数组

        /**
         * 初始化
         */
        const init = async () => {
            const { data } = await proxy.$http.get(Api.getAuthList, {
                params: { role_id: id.value }
            });

            getRoleMenuList(data);
        };
        /**
         * 获取权限菜单列表
         */
        const getRoleMenuList = async (menuIds) => {
            const { code, data } = await proxy.$http.get(Api.getMenuList);

            if (code === 200) {
                const oneMenuList = proxy.$utils.getCategory(data);
                const menuList = proxy.$utils.getChildrenTree(oneMenuList, oneMenuList[0]);
                const list = proxy.$utils.getTreeToArray(menuList, null, null, false); // 按可伸展处理分类

                list.forEach((item, index) => {
                    tableList[index] = item;
                });

                setTimeout(() => {
                    if (menuIds.length) {
                        const authIdArr = menuIds.split(',');

                        for (let i in tableList) {
                            if (authIdArr.indexOf(String(tableList[i].id)) >= 0) {
                                proxy.$refs.tableRef.toggleRowSelection(tableList[i]);
                            }
                        }
                    }
                }, 200);
            }
        };
        /**
         * 表格全选
         */
        const handleSelectionChange = (rows) => {
            tableSelectIdArr = reactive([]);

            if (rows.length) {
                for (let i in rows) {
                    tableSelectIdArr.push(rows[i].id);
                }
            } else {
                tableSelectIdArr = reactive([]);
            }
        };
        /**
         * 显示行
         */
        const showTr = (data, index) => {
            let show = data.row.parent ? data.row.parent.expanded && data.row.parent.show : true;
            data.row.show = show;
            return show ? '' : 'display: none;';
        };
        /**
         * 点击展开和关闭的时候，图标的切换
         */
        const toggleIconShow = (index, row) => {
            if (row.childrens && row.childrens.length > 0) {
                return true;
            }

            return false;
        };
        /**
         * 展开下级
         */
        const toggle = (trIndex) => {
            let row = tableList[trIndex];
            row.expanded = !row.expanded;
        };
        /**
         * 提交
         */
        const onSubmit = async () => {
            loading.value = true;

            let params = {
                role_id: id.value,
                menu_id: tableSelectIdArr
            };

            if (loading.value) {
                const { code, msg, data } = await proxy.$http.post(Api.updateAuth, params);

                if (code === 200) {
                    proxy.$msg.success(msg);
                    visible.value = false;
                } else {
                    proxy.$msg.error(msg ? msg : data);
                }

                loading.value = false;
            }
        };
        /**
         * 类型
         */
        const menuType = (value) => {
            return proxy.$systemMenuTypeToStr(value);
        };

        // 监听窗口开关
        watch(visible, (newVal, oldVal) => {
            newVal ? init() : '';
        });

        return {
            id,
            loading,
            visible,
            tableList,
            handleSelectionChange,
            showTr,
            toggleIconShow,
            toggle,
            onSubmit,
            menuType
        };
    }
};
</script>
